<template>
    <div class="goodsInfo-container">
         <!-- 小球部分 -->
        <transition
        @before-enter="beforeEnter"
        @enter="enter"
        @after-enter="afterEnter">
            <div class="ball" v-show="flag" ref="ball"></div>
        </transition>
        <!-- 商品轮播部分 -->
        <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						  <!-- 轮播图 -->
                            <mt-swipe :auto="4000">
                                <mt-swipe-item v-for="item in lunbotu" :key="item.img_url">
                                    <img :src="item.img_url" alt="">
                                </mt-swipe-item>
                            </mt-swipe>
					</div>
				</div>
		</div>
        <!-- 商品购买区域 -->
        <div class="mui-card">
				<div class="mui-card-header goodslist-title">{{ goodslist.title }}</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p class="price">
                            市场价: <del>￥{{ goodslist.sell_price }}</del>&nbsp;&nbsp;&nbsp;<span class="now_price">销售价:￥{{ goodslist.market_price }}</span>
                        </p>
                        <!-- 因为商品库存数量是异步获取的，所以直接拿过来当最大值会出现undefined，所以可以使用watch事件监听 -->
                     <div class="shopNumber">
                            购买数量: 
                            <div class="mui-numbox" data-numbox-min='1' :max="max">
                                <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
                                <input id="test" class="mui-input-numbox" type="number"  value="1" ref="numbers" @change="getSelectedCount" />
                                <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
                            </div>
                        </div>
                        <p>
                            <mt-button type="primary" size="small" >立即购买</mt-button>
                            <mt-button type="danger" size="small" @click="joinCar" >加入购物车</mt-button>
                        </p>
					</div>
				</div>
				
		 	</div>

        <!-- 商品参数部分 -->
        <div class="mui-card">
				<div class="mui-card-header">商品参数</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p>商品货号 : {{ goodslist.goods_no }}</p>
                        <p>库存情况 : {{ goodslist.stock_quantity }}件</p>
                        <p>上架时间 : {{ goodslist.add_time |dataFormat }}</p>
					</div>
				</div>
				<div class="mui-card-footer mui-card-footer-new">
                    <mt-button type="primary" size="large" plain @click="getDesc(id)">图文介绍</mt-button>
                    <mt-button type="danger" size="large" plain @click="getComment(id)">商品评论</mt-button>
                </div>
			</div>
    </div>
</template>
<script>
import { Toats } from "mint-ui"
//导入muijs
import mui from "../../lib/mui/js/mui.min.js"

export default {
    data(){
        return{
            lunbotu: [],//用来存放轮播图片
            goodslist: {},//用来存放商品信息的
            id: this.$route.params.id,//用来存放路由url地址id，方便调用
            flag: false,//小球的显示状态
            selectedCount: 1,//保存用户选中的商品数量，默认，认为用户购买一个
            max: 1//商品的库存数量，默认为0
            
        }
    },
    methods:{
        getLunbotu(){
            this.$http.get("../../api/getgoodslist.json").then(result =>{
                if(result.body.status === 0){
                    //var lunbotuList=result.body.message[0].container
                    this.lunbotu=result.body.message[this.id-1].container//根据url传入的id在message数组中找到对应的轮播图
                    
                }else{
                    Toats("数据加载失败")
                }
            })
        },
        getGoodsInfo(){
            this.$http.get("../../api/getgoodslist.json").then(result => {
                if(result.body.status === 0){
                    this.goodslist=result.body.message[this.id-1].goodslist[0]
                    //获取商品的库存数量
                    this.max=result.body.message[this.id-1].goodslist[0].stock_quantity
                   
                }
            })
        },
        //使用编程式导航实现跳转到 图文介绍页面
        getDesc(id){
            this.$router.push({ name: 'goodsdesc',params: {id}})
        },
        
        //使用编程式导航实现跳转到 商品评论页面
        getComment(id){
            this.$router.push({ name: 'goodscomment',params: {id}})
        },
        joinCar(){//实现小球加入购物车功能
            this.flag=!this.flag

            //{id: 商品的id, count: 要购买的数量, pice: 商品的单价, selected: false(商品是否被选中))}
            //拼接出一个，要保存到 store 中 car 数组里的商品信息对象
            var goodsinfo={
                id: this.id,
                selectedCount: this.selectedCount,
                pice: this.goodslist.market_price,
                selected: true,
                title: this.goodslist.title,
                img_url: this.goodslist.img_url
            }
    //调用 store 中的 mutations 来将商品加入购物车中
            this.$store.commit('addToCar',goodsinfo)
        },
        beforeEnter(el){//小球运动前的钩子函数
            el.style.transform="translate(0,0)"
        },
        enter(el,done){//小球运动时的钩子函数

        //实现小球动画适配不同滚动条位置和分辨率
        //使用dom 提供的 domObject.getBoundingClientRect()获取小球和购物车的位置
        const ballPostion=this.$refs.ball.getBoundingClientRect()//小球的位置
        const badgePostion=document.getElementById("badge").getBoundingClientRect()

        const x=badgePostion.left-ballPostion.left
        const y=badgePostion.top-ballPostion.top
       
            el.offsetWidth//唤醒动画功能
            el.style.transform=`translate(${x}px,${y}px)`
            el.style.transition="all 1s cubic-bezier(.4,-0.19,.97,.67)"
            done()
        },
        afterEnter(el){//小球运动后的钩子函数
            this.flag=!this.flag
        },
        getSelectedCount(){//当子组件把选中的数量传递给父组件的时候，把选中的值保存到 data 上
        this.selectedCount=parseInt(this.$refs.numbers.value)
        
        }
    },
    watch: {
        //属性监听
        'max': function(newVal,oldVal){
            //利用js Api 设置numbox 的最大值
            mui(".mui-numbox").numbox().setOption("max",newVal)
        }
    },
    created(){
        this.getLunbotu()
        this.getGoodsInfo()
    },
    mounted(){
        //初始化numbox
        mui('.mui-numbox').numbox()
    }
}
</script>
<style lang="less" scoped>
    .goodsInfo-container{
        background-color: #eeeeee;
        overflow: hidden;

    }
    .mui-card-content-inner{
        img{
            width: auto;
        }
    }
    .now_price{
        color: red;
    }
    .shopNumber{
        margin-bottom: 10px;
    }
    .mui-card-footer-new{
        display: block;
    
        button{
            margin: 15px 0;
        }
    }
    .goodslist-title{font-size: 14px;}

    //小球动画部分
    .ball{
        width: 20px;
        height: 20px;
        background-color: red;
        position: absolute;
        border-radius: 50%;
        top: 403px;
        left: 137px;
        z-index: 999999;
    }
    .shopNumber{
        position: relative;
    }
</style>
